<template>
  <div
    ref="mainWrapperRef"
    class="main-wrapper z-[1] dark:bg-zinc-800 duration-500 scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
  >
    <navigation />
    <div class="list bg-white dark:bg-zinc-800">
      <list-vue />
    </div>
    <m-trigger-menu
      v-if="isMobileTerminal"
      class="fixed bottom-[.6rem] left-[50%] translate-x-[-50%] w-[220px]"
    >
      <m-trigger-menu-item
        icon="home"
        iconClass="fill-zinc-900 dark:fill-zinc-200"
      >
        首页
      </m-trigger-menu-item>
      <m-trigger-menu-item
        v-if="userStore.token"
        icon="vip"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onVipClick"
      >
        VIP
      </m-trigger-menu-item>
      <m-trigger-menu-item
        icon="profile"
        iconClass="fill-zinc-400 dark:fill-zinc-500"
        textClass="text-zinc-400 dark:text-zinc-500"
        @click="onMyClick"
      >
        {{ userStore.token ? '我的' : '去登录' }}
      </m-trigger-menu-item>
    </m-trigger-menu>
  </div>
</template>
<script>
export default {
  name: 'home'
}
</script>

<script setup>
import { onActivated, ref } from 'vue'
import { useRouter } from 'vue-router'
import navigation from './components/navigation/index.vue'
import listVue from './components/list/index.vue'
import { useUserStore } from '@/store/user'
import { useSystemStore } from '@/store/system'
import { isMobileTerminal } from '@/utils/flexible'
import { useScroll } from '@vueuse/core'

const userStore = useUserStore()
const systemStore = useSystemStore()
const router = useRouter()

const mainWrapperRef = ref(null)

const onMyClick = () => {
  // 移动端下跳转类型
  systemStore.routerType = 'push'
  if (userStore.token) {
    router.push('/profile')
  } else {
    router.push('/login')
  }
}

const onVipClick = () => {
  // 移动端下跳转类型
  systemStore.routerType = 'push'
  router.push('member')
}

const { y: mainWrapperScrollTop } = useScroll(mainWrapperRef)
onActivated(() => {
  if (!mainWrapperRef.value) return
  mainWrapperRef.value.scrollTop = mainWrapperScrollTop.value
})
</script>

<style lang="scss" scoped>
.main-wrapper {
  height: 100vh;
  overflow-y: auto;
  .list {
    max-width: 1280px;
    margin: 0 auto;
  }
}
</style>
